const vueCode = `
<template>
  <div>
    <h1>Monaco Editor</h1>
    <div id="moanco-vue-ediotr" style="height: calc(100vh - 100px);border: 2px dashed #dedede;"></div>
  </div>
</template>

<script>
import * as monaco from 'monaco-editor-core'
// import { editor, Uri } from 'monaco-editor-core'
import { loadGrammars, loadTheme } from 'monaco-volar'
import '../monaco/loadOnigasm'
import '../monaco/loadMonacoEnv'
export default {
  name: 'MonacoEditor',
  data () {
    return {
      code: ''
    }
  },
  methods: {
    createModel () {
      return monaco.editor.createModel(this.code, 'vue', monaco.Uri.parse('file:///demo.vue'))
    },
    initMonaco () {
      // const self = this
      const theme = loadTheme(monaco.editor)
      const model = this.createModel()
      const element = document.getElementById('moanco-vue-ediotr')
      const editorInstance = monaco.editor.create(element, {
        theme,
        model,
        automaticLayout: true,
        scrollBeyondLastLine: false,
        minimap: {
          enabled: false
        },
        inlineSuggest: {
          enabled: false
        },
        'semanticHighlighting.enabled': true
      })
      editorInstance.languages = monaco.languages
      console.log('editorInstance', editorInstance)
      console.log('monaco', monaco)
      loadGrammars(monaco, editorInstance)
    }
  },
  mounted () {
    const self = this
    self.initMonaco()
  }
}
</script>
`

export {
  vueCode
}
